<!-- 组件 
  html
  css 
  js
    展示数据 
    标题行
 分布式
 微服务 : 就可以理解为一个 一个功能独立的组件 (服务)
-->
<template>
    <h1><slot></slot></h1>
    <table>
        <!-- 标题行，是由其它人员传递过来的 -->
        <tr>
            <th  v-for="head in headTitle[0]">
                {{ head }}
            </th>
        </tr>
        <!-- 数据展示 传递过来的 -->
        <tr v-for="row in data">
            <td v-for="col in headTitle[1]">
            {{ row[col] }}
        </td>
        </tr>
    </table>
    <el-icon><Plus /></el-icon>
    <el-button type="primary" :icon="Plus" circle />
    <el-button type="success" round>添加</el-button>

</template>

<script setup>

import { defineProps } from 'vue';
import {Plus} from '@element-plus/icons-vue'
const props = defineProps(['title','data']);
console.log(props);

const headTitle = props.title;
const data = props.data;

</script>

       
<style scoped>
table {
  width: 100%;
  height: 300px;
  border: 1px solid blue;
  background-image: linear-gradient(to right, rgb(184, 201, 168), rgb(88, 153, 184), rgb(157, 202, 98), rgb(97, 158, 201));
}

table:hover {
  box-shadow: 3px 3px 3px gray;
}
</style>